<script>
import SideBar from '@/components/SideBar.vue';
import PostList from '@/components/PostList.vue';
import { getUserTrades } from "@/apis/post";
import { useUserStore } from "@/stores/user";

export default {
  components: {
    SideBar, // 确保名称一致
    PostList,
  },
  data() {
    return {
      transactions: [], // 存储交易记录
      status: 0, // 默认状态
      error: null, // 错误信息
    };
  },
  setup() {
    const userStore = useUserStore(); // 获取用户全局状态
    return {
      userId: userStore.userAInfo.userId, // 从 Pinia 获取 userId
    };
  },
  methods: {
    async fetchTrades(status) {
      try {
        this.status = status; // 更新当前状态
        console.log("Fetching trades with userID:", this.userId);
        console.log("parent status1:",status);
        const data = await getUserTrades(this.userId, this.status); // 调用 API
        this.transactions = data.transactions; // 更新交易记录
        this.error = null; // 清除错误
      } catch (error) {
        this.error = error.message || "加载交易记录失败"; // 设置错误信息
        console.error("加载交易记录失败:", error);
      }
    },
    handleUpdateList(){
      this.fetchTrades(this.status);
    },
  },
  mounted() {
    this.fetchTrades(this.status); // 页面加载时调用
    console.log("parent status:",this.status);
  },
};
</script>


<template>
    <div class="container">
        <SideBar @statusChange="fetchTrades"/>
        <PostList @update-list="handleUpdateList" :transactions="transactions" :error="error" :status="status"/>
    </div>
    
</template>

<style scoped>
.container {
  display: flex;
  flex-direction: row;
  width: 70%;
  height: 100vh;
  /* background-color: rgb(232, 16, 16); */
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.5); /* 添加边框阴影 */
}

.sidebar {
  width: 350px; /* 侧边栏宽度，可根据需要调整 */
  background-color: #c31212;
  border-right: 1px solid #ddd;
  padding: 16px; /* 内边距 */
  box-sizing: border-box;
}

.post-list {
  flex: 1; /* 占用剩余空间 */
  /* text-align: center; */
  padding: 16px;
  overflow-y: auto; /* 滚动 */
  box-sizing: border-box;
  background-color: burlywood;
}
</style>